@import '../../../../assets/platform/less/theme/app.less';

.app-img-cropper-container{
    display: flex;
    display: -webkit-flex;
    .app-img-cropper-cut-container{
        width:600px;
        height:350px;
    }
    .app-img-preview-container{
        width:150px;
        height:350px;
        text-align: center;
       .app-img-preview-title{
        font-size: 14px;
        font-weight: 500;
       }
       .app-original-img{
           margin-top: 15px;
           img{
               width: 64px;
               height: 64px;
               border: 0;
           }
       }
       .app-img-preview-round{
           border-radius: 50%;
       }

       .app-img-preview-square{
          border-radius: @app-border-radius-base;
       }
       .app-preview-img-label{
         margin-top: 8px;
         margin-bottom: 30px;
       }
       .app-preview-lg-img{
          margin-top: 15px;
          img{
            width: 64px;
            height: 64px; 
            border: 0;
          }
       }

       .app-preview-sm-img{
        margin-top: 15px;
        img{
          width: 32px;
          height: 32px; 
          border: 0;
        }
     }
    }
}

.app-img-cropper-alert{
    margin-top: 15px;
    color: @app-error-color;
}

.app-img-cropper-btns{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
    .app-img-cropper-upload-btn{
        display: block;
        overflow: hidden;
        position: relative;
        width:82px;
        margin-right: 8px;
        [type=file] {
            cursor: pointer;
            display: block;
            filter: alpha(opacity=0);
            min-height: 100%;
            min-width: 100%;
            opacity: 0;
            position: absolute;
            right: 0;
            text-align: right;
            top: 0;
        }
    }
}

